import './css/sidebar.less';
import emitter from '../utils/events';

export class Sidebar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            data: [
                {
                    type: 'home',
                    value: 'home',
                    link: '/',
                    routers: null,
                }, {
                    type: 'user',
                    value: 'hplus',
                    link: null,
                    routers: [
                        {
                            type: 'mail',
                            value: 'hplus',
                            link: '/hplus',
                        },
                    ],
                },
            ],
        };
        this.onCollapse = this.onCollapse.bind(this);
        this.init = this.init.bind(this);
    };

    onCollapse(collapsed) {
        this.setState({collapsed});
    }

    componentDidMount() {
        let self = this;
        this.setState({
            refs: self.refs,
        });
    }

    add(values1, count) {
        emitter.emit('changeMessage', values1, count);
    }

    componentWillUnmount() {

    }

    init() {
        let lists = this.state.data.map((values, count) => {
            let counts = count + 1;
            if (values.routers && values.link === null) {
                let lists1 = values.routers.map((values1, count1) => {
                    values1.key = counts + count1;
                    return <Antd.Menu.Item key={count1} onClick={this.add.bind(this, values1, counts + count1)}>
                        <ReactRouterDom.Link to={values1.link}>
                            <Antd.Icon type={values1.type}/>
                            <span>{values1.value}</span>
                        </ReactRouterDom.Link>
                    </Antd.Menu.Item>;
                });
                return <Antd.Menu.SubMenu
                    key={'sub' + counts}
                    title={<span><Antd.Icon type={values.type}/><span>{values.value}</span></span>}>
                    {lists1}
                </Antd.Menu.SubMenu>;
            }
            values.key = counts;
            return <Antd.Menu.Item key={counts} onClick={this.add.bind(this, values, counts)}>
                <ReactRouterDom.Link to={values.link}>
                    <Antd.Icon type={values.type}/>
                    <span>{values.value}</span>
                </ReactRouterDom.Link>
            </Antd.Menu.Item>;
        });
        return <Antd.Menu theme="default" defaultSelectedKeys={['0']} mode="inline">
            <Antd.Menu.Item key="0">
                <ReactRouterDom.Link to="/">
                    <Antd.Icon type="pie-chart"/>
                    <span>首页</span>
                </ReactRouterDom.Link>
            </Antd.Menu.Item>
            {lists}
        </Antd.Menu>;
    }

    render() {
        return (
            <Antd.Layout.Sider className="my-bg-white my-border-right"
                               collapsible
                               collapsed={this.state.collapsed}
                               onCollapse={this.onCollapse}>
                {this.init()}
            </Antd.Layout.Sider>
        );
    };
}


Sidebar.contextTypes = {
    data: PropTypes.object.isRequired,
    languages: PropTypes.object.isRequired,
};

